<template>
    <div class="lego-preset-color">
        <template v-for="(item, index) in modelValue" :key="`${index}`">
            <div class="lego-preset-color-row">
                <el-input v-model="item.value" :disabled="props.disabled" placeholder="请输入色值" />
                <el-button type="primary" link :disabled="props.disabled" :icon="Plus" @click="addItem(index)">
                </el-button>
                <el-button type="primary" link :disabled="props.disabled" :icon="Delete" @click="deleteItem(index)">
                </el-button>
            </div>
        </template>
        <div v-if="!modelValue || !modelValue.length" class="lego-preset-color-row">
            <el-button
                :disabled="props.disabled"
                type="primary"
                link
                :icon="Plus"
                @click="() => (modelValue = [{value: ''}])"
            >
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {defineModel, defineProps, defineEmits} from 'vue';
import {ElInput, ElButton} from 'element-plus';
import {Plus, Delete} from '@element-plus/icons-vue';

const modelValue = defineModel({
    type: Array<{value: string}>,
    default: () => []
});

const props = defineProps({
    disabled: Boolean
});

const deleteItem = (index) => {
    modelValue.value.splice(index, 1);
};
const addItem = (index) => {
    modelValue.value.splice(index + 1, 0, {value: ''});
};
</script>

<style lang="less" scoped>
@import '../css/lib.less';

.lego-preset-color {
    .lego-preset-color-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        gap: 10px;
        min-height: 32px;
    }
}
</style>
